<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初识MVVM分层思想</title>
    <!-- 安装vue：当你使用script进行vue安装之后，上下文就注册了一个全局变量 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <!-- 
        1. MVVM是什么？
            M：model（模型/数据）
            V: view（视图）
            VM：ViewModel（视图模型）：VM是MVVM中的核心部分。（它起到一个核心的非常重要的作用）
            MVVM是目前前端开发领域当中非常流行的开发思想。（一种架构模式）
            目前前端的大部分主流框架都实现了这个MVVM思想，例如Vue、React等
        2. Vue框架遵循MVVM吗？
            虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发
            Vue框架基本上也是符合MVVM思想的
        3. MVVM模型中倡导了Model和View进行了分离，为什么要分离？
            假如Model和View不分离，使用最原始的原生js代码写项目：如果发生任意的数据改动，接下来我们需要编写大篇幅的操作DOM元素的代码。

            将Model和View分离之后，出现一个VM核心，这个VM核心吧所有的脏活累活给做了，
            也就是说，当Model发生改变之后，VM自动去更新View。当View发生改动之后。
            VM自动去更新Model。我们再也不需要编写操作DOM的js代码，提高开发效率。
    -->

    <!-- 准备一个容器 -->

    <!-- View  V -->
    <div id="app">
        姓名： <input type="text" v-model="name" />
    </div>

    <!-- vue程序 -->
    <script>

        //赋值的过程可以看作是一种绑定的过程
        // let i = 100

        // ViewModel  VM     即Vue对象就是VM
        const vm = new Vue({
            el: '#app',

            // Model M
            data: {
                name: "李四"
            }

        })
    </script>
</body>

</html>